<template>
    <div>
      
        <el-pagination
        v-model:current-page="Page"
        v-model:page-size="Size"
        :page-sizes="[5, 10, 15, 20]"
        :small="true"
        :disabled="false"
        :background="false"
        layout="total, sizes, prev, pager, next, jumper"
        :total="totalNum"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        />

   
    </div>
</template>

<script setup lang="ts">
    import { ref } from 'vue'
    
    const props=withDefaults(defineProps<{
        currentPage?:number,
        pageSize?:number,
        totalNum:number
    }>(),{
        currentPage:1,
        pageSize:5,
        totalNum:200
    })
    const Page=ref<number>(props.currentPage) 
    const Size=ref<number>(props.pageSize)
    const emits=defineEmits(['changePageSize','changePage'])
    // 每页多少页数
    const handleSizeChange = (val: number) => {
       
        emits('changePageSize',val)
    }
    // 当前页数
    const handleCurrentChange = (val: number) => {
        
        emits('changePage',val)
    }
</script>

<style  scoped lang="less">
.demo-pagination-block + .demo-pagination-block {
  margin-top: 10px !important;
}
.demo-pagination-block .demonstration {
  margin-bottom: 16px !important;
}
// :deep(.el-select){
//     margin-top: -10px !important;
// }

:deep(.el-input){
    margin-top: -0px !important;
}
</style>